<template>
  <div class="swiper">
    <van-swipe class="swiper-list" :autoplay="3000" indicator-color="white">
      <template v-for="(item, index) of swiperData">
        <van-swipe-item class="item">
          <img :src="item.url" alt="">
        </van-swipe-item>
      </template>
      <template #indicator="{ active, total }">
        <div class="indicator">
          <template v-for="(value, key, index) in swiperGroup" :key="index">  
            <span class="item" :class="{active:swiperData[active]?.enumPictureCategory == key}">
              <span class="text">{{getName(value[0]?.title)}}</span>
              <span class="num" v-if="swiperData[active]?.enumPictureCategory == key">
                {{getCategoryIndex(swiperData[active])}}/{{value.length}}
              </span>
            </span>
          </template>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script setup>
import {  } from 'vue'
const props = defineProps({
  swiperData: {
    type: Array,
    default: () => []
  }
})

const swiperGroup = {}
// 这种for循环写法
for (const item of props.swiperData){
  if(!swiperGroup[item.enumPictureCategory]){
    swiperGroup[item.enumPictureCategory] = []
  }
  swiperGroup[item.enumPictureCategory].push(item)
}

const nameReg = /【(.*?)】/i
const getName = (name) => nameReg.exec(name)[1]

const getCategoryIndex = (item) => {
  const tempArr = swiperGroup[item.enumPictureCategory]
  return tempArr.findIndex(data => data === item) + 1
}
</script>

<style lang='less' scoped>
.swiper-list{
  .item{
    img{
      width: 100%;
    }
  }
  .indicator{
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
    .item{
      margin: 0 3px;
      &.active{
        padding: 3px;
        border-radius: 5px;
        background-color: #fff;
        color: #333;
      }
    }
  }
}
</style>